<template>
  <div class="page_padding">
    <MyNavBar @goback="goback" title="修改密码" />
    <van-notice-bar color="#004DB6" background="#ecf9ff" wrapable>
      <div v-if="!$route.query.title">检测到您的密码级别较低，为了账号安全请您更改级别更高的密码！</div>
      <div>设置规则为：①密码长度8--16位；②密码必须包含数字、大小写字母、特殊字符中至少3种且不少于8位。</div>
    </van-notice-bar>
    <div class="form-box">
      <van-form validate-first @submit="onSubmit" ref="form">
        <van-field
          v-model="form.oldPwd"
          type="text"
          name="原密码"
          label="原密码"
          placeholder="请输入原密码"
          :rules="rules.oldPwd" />
        <van-field
          v-model="form.newPwd"
          type="text"
          name="validator"
          label="新密码"
          placeholder="请设置新密码"
          :rules="rules.newPwd"
          maxlength="16" />
        <van-field
          v-model="form.repeatPwd"
          type="text"
          name="确认密码"
          label="确认密码"
          placeholder="请确认新密码"
          :rules="rules.repeatPwd"
          maxlength="16" />
        <div style="margin: 120px 16px">
          <!-- <van-button round block type="info" native-type="submit">提交</van-button> -->
          <div class="btn" @click.stop="onSubmit">提交</div>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import MyNavBar from '@com/MyNavBar'
import { updateLoginPassword } from '@api/api-public'
export default {
  name: 'password',
  components: { MyNavBar },
  props: {},
  data() {
    const that = this
    return {
      form: {
        oldPwd: '',
        newPwd: '',
        repeatPwd: '',
        type: '1',
        tenantId: '',
      },
      rules: {
        //验证规则
        oldPwd: [
          {
            required: true,
            message: '请输入原密码',
          },
        ],
        newPwd: [
          {
            required: true,
            message: '请设置新密码',
          },
          {
            validator: val => {
              if (val === that.form.oldPwd) {
                return false
              }
            },
            message: '新密码不能与原密码相同',
          },
          {
            validator: val => {
              let pattern1 =
                /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]{8,16}$/
              if (!pattern1.test(val)) {
                return false
              }
            },
            message: '密码长度8~16，包含数字、大小写字母、特殊字符中至少3种!',
          },
        ],
        repeatPwd: [
          {
            required: true,
            message: '请确认新密码',
          },
          {
            validator: val => {
              if (val !== that.form.newPwd) {
                return false
              }
            },
            message: '与新密码不一致',
          },
        ],
      },
      loginPwd: '',
    }
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    this.form.tenantId = localStorage.tenantId
    // this.loginPwd = window.atob(localStorage.user_loginPassword)
  },
  methods: {
    goback() {
      this.$router.go(-1)
    },
    onSubmit() {
      // if (this.form.oldPwd !== this.loginPwd) {
      //   return this.$toast.fail('原密码不正确')
      // }
      this.$refs.form
        .validate()
        .then(() => {
          updateLoginPassword(this.form).then(res => {
            if (res.status === 200) {
              this.$toast.success('密码修改成功！请重新登录')

              setTimeout(() => {
                if (!['flutter-android', 'flutter-ios', 'flutter'].includes(localStorage.platform)) {
                  localStorage.clear()
                  sessionStorage.clear()
                  this.$router.replace('/login')
                } else {
                  localStorage.clear()
                  sessionStorage.clear()
                  window.flutter_inappwebview.callHandler('logOut', '')
                }
              }, 1000)
            }
          })
          // 验证通过
        })
        .catch(() => {
          console.log(456)
          //验证失败
        })
    },
  },
}
</script>
<style lang="scss" scoped>
.page_padding {
  .van-notice-bar {
    padding: 6px 10px;
  }
  .form-box {
    margin-top: 6px;
    /deep/.van-field {
      padding: 6px 25px;
      flex-direction: column;
      font-size: 16px;
      .van-field__label {
        width: 100%;
      }
    }
    .btn {
      width: 295px;
      height: 45px;
      background: #004db6;
      border-radius: 6px;
      font-weight: bold;
      color: #ffffff;
      line-height: 45px;
      text-align: center;
      margin: auto;
    }
  }
}
</style>
